<section class="pm_form col-1-2">
    <div class="clearfix">
        <div class="col-1-4">
            <label for="enable" translate-context="Label" translate>Enable</label>
        </div>
        <div class="col-3-4">
            <toggle
                ng-disabled="mock"
                name="autoresponder.toggle"
                data-id="enable"
                status="model.IsEnabled"
                ng-if="!mock"></toggle>
        </div>
    </div>

    <div class="clearfix" ng-if="model.IsEnabled">
        <div class="col-1-4">
            <label for="select-duration" translate-context="Label" translate>Duration</label>
        </div>
        <div class="col-3-4">
            <div class="pm_grid no-padding no-margin">
                <div class="col-1-2">
                    <div class="pm_select">
                        <durationselect
                            data-repeat="{{ ::model.Repeat }}"
                            data-disable-input="{{ ::mock }}"></durationselect>
                        <i class="fa fa-angle-down"></i>
                    </div>
                </div>
            </div>
            <p class="help" ng-if="model.Repeat === constants.FOREVER">
                <i class="fa fa-info-circle ng-scope"></i>
                <span translate-context="Auto-reply duration description" translate>Auto-reply is active until you turn it off.</span>
            </p>
            <p class="help"ng-if="model.Repeat === constants.FIXED_INTERVAL">
                <i class="fa fa-info-circle ng-scope"></i>
                <span translate-context="Auto-reply duration description" translate>Auto-reply is active from the start time to the end time.</span>
            </p>
            <p class="help" ng-if="model.Repeat === constants.DAILY">
                <i class="fa fa-info-circle ng-scope"></i>
                <span translate-context="Auto-reply duration description" translate>Auto-reply is always active on the days of the week you select, between the selected hours.</span>
            </p>
            <p class="help" ng-if="model.Repeat === constants.WEEKLY">
                <i class="fa fa-info-circle ng-scope"></i>
                <span translate-context="Auto-reply duration description" translate>Auto-reply is active each week between the selected start and end time.</span>
            </p>
            <p class="help" ng-if="model.Repeat === constants.MONTHLY">
                <i class="fa fa-info-circle ng-scope"></i>
                <span translate-context="Auto-reply duration description" translate>Auto-reply is active each month between the selected start and end time.</span>
            </p>
        </div>
    </div>

    <div class="clearfix" ng-if="model.Repeat === constants.DAILY && model.IsEnabled">
        <div class="col-1-4">
            <label translate-context="Label" translate>Days</label>
        </div>
        <div class="col-3-4">
            <multiselect
                name="autoresponder.DaysSelected"
                id="enabledDays"
                data-options="days"
                data-selected="model.DaysSelected"
                data-disabled="{{ ::mock }}"></multiselect>
        </div>
    </div>

    <div class="clearfix" ng-if="model.Repeat !== constants.FOREVER && model.IsEnabled">
        <div class="col-1-4">
            <label translate-context="Label" translate for="startTime">Start time</label>
        </div>
        <autoresponder-time-picker
             data-date-picker-key="datetimepickerStartTime"
            id="datetimepickerStartTime"
            data-label-id="StartTime"
            data-repeat="{{ ::model.Repeat }}"
            data-zone="{{ ::model.Zone }}"
            data-timestamp="{{ ::model.StartTime }}"
            data-disable-input="{{ ::mock }}"
            data-form="form"></autoresponder-time-picker>
    </div>

    <div class="clearfix" ng-if="model.Repeat !== constants.FOREVER && model.IsEnabled">
        <div class="col-1-4">
            <label translate-context="Label" translate for="endTime">End time</label>
        </div>
        <autoresponder-time-picker
            data-date-picker-key="datetimepickerEndTime"
            id="datetimepickerEndTime"
            data-label-id="EndTime"
            data-repeat="{{ ::model.Repeat }}"
            data-zone="{{ ::model.Zone }}"
            data-timestamp="{{ ::model.EndTime }}"
            data-disable-input="{{ ::mock }}"
            data-form="form"></autoresponder-time-picker>
    </div>

    <div class="clearfix" ng-if="model.Repeat !== constants.FOREVER && model.IsEnabled">
        <div class="col-1-4">
            <label for="time-zone" translate-context="Label" translate>Time zone</label>
        </div>
        <div class="col-3-4">
            <div class="pm_grid  no-padding no-margin">
                <div class="col-1-2">
                    <div class="pm_select">
                        <zoneselect
                            data-zone="{{ ::model.Zone }}"
                            data-disable-input="{{ ::mock }}"></zoneselect>
                        <i class="fa fa-angle-down"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="clearfix desktopOnly">
    </div>
</section>
